<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul>li{
            list-style: none;
        }
        .s1,.s2{
            color: red;
        }
        </style>
</head>
<body>
<h1>这是一个表单</h1>
<form>
    <ul>
        <li>username:<input type="text" value="" id="username"><span class="s1"></span></li>
        <li>password:<input type="password" id="password"><span class="s2"></span></li>
        <li><input type="button" onclick="get()" value="按钮"></input></li>
    </ul>
</form>
<script>
    function get() {
        //debugger 断点调试，需要打开浏览器控制台
        let username = document.getElementById("username").value;
        console.log(username);
        let password = document.getElementById("password").value;
        if (username === "") {
            document.querySelector(".s1").innerHTML = "用户名不能为空";
            return;
        }
        if (password === "") {
            document.querySelector(".s2").innerHTML = "密码不能为空";
            return;
        }
        alert("提交成功");
    }
</script>
</body>
</html>